<template>
  <div class="question-type-one">
    <div class="question-header">
      <div class="question-progress">
        <span>
          Question
          <i>{{ questionNumber }}</i>
          /{{ totalQuestions }} (Group {{ stageNumber }})
        </span>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: `${progress}%` }"></div>
        </div>
      </div>
    </div>

    <h2 class="question-title">{{ question.question }}</h2>

    <div class="options-container">
      <div v-for="option in question.answers" :key="option.id" class="option-item" :class="{ selected: selectedOption === option.id }" @click="selectOption(option.id, question.id)">
        <div class="option-image">
          <img :src="option.image | imgPath" alt="Option image" />
        </div>
        <div class="option-text">
          {{ option.answer }}
        </div>
        <div class="option-check" v-if="selectedOption === option.id">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor" />
          </svg>
        </div>
      </div>
    </div>

    <div class="navigation-buttons">
      <button class="prev-btn" @click="handlePrevQuestion" :disabled="stageNumber === 1 && questionNumber === 1">Previous question</button>
      <!-- <button v-if="questionNumber < totalQuestions" class="next-btn" @click="handleNextQuestion" :disabled="selectedOption === null">Next question</button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionTypeOne',
  props: {
    question: {
      type: Object,
      required: true,
    },
    questionNumber: {
      type: Number,
      required: true,
    },
    totalQuestions: {
      type: Number,
      required: true,
    },
    stageNumber: {
      type: Number,
      required: true,
    },
    progress: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      selectedOption: null,
    }
  },
  methods: {
    // 选择选项  index是问题答案的id，qId是问题的id
    selectOption(index, qId) {
      // 允许重新选择，即使之前已选择
      this.selectedOption = index
      // 向父组件发送选择的选项
      this.$emit('select-option', index, qId)

      // 短暂延迟后跳转到下一题，给用户看到选中效果
      setTimeout(() => {
        this.$emit('next-question')
      }, 500)
    },

    // 检查之前的答案
    checkPreviousAnswer() {
      // 从Vuex store获取所有答案
      const answers = this.$store.state.answers || []

      // 查找当前阶段和问题的答案
      const previousAnswer = answers.find((answer) => answer.stageId === this.stageNumber && answer.questionId === this.questionNumber - 1)

      // 如果找到了之前的答案，设置选择状态
      if (previousAnswer !== undefined) {
        this.selectedOption = previousAnswer.selectedOption
      }
    },

    // 处理上一题按钮点击
    handlePrevQuestion() {
      // console.log('QuestionTypeOne 组件中的 handlePrevQuestion 被触发')
      // console.log('当前阶段:', this.stageNumber, '当前题号:', this.questionNumber)

      // 始终使用 Test.vue 中已定义的 prevQuestion 方法
      this.$emit('prev-question')
    },

    // 处理下一题按钮点击
    handleNextQuestion() {
      // 向父组件发送选择的选项
      this.$emit('select-option', this.selectedOption, this.question.id)

      // 短暂延迟后跳转到下一题，给用户看到选中效果
      setTimeout(() => {
        this.$emit('next-question')
      }, 300)
    },
  },
  created() {
    // 组件创建时检查之前的答案
    this.checkPreviousAnswer()
  },
}
</script>

<style scoped lang="scss">
.question-type-one {
  max-width: 500px;
  margin: 0 auto;
  padding: 70px 16px 16px;
  min-height: 100vh;
  // background: #f5f5fd;
  display: flex;
  flex-direction: column;
}

.question-header {
  width: 100%;
  padding: 16px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #e2e4f5;
}

.question-progress {
  font-size: 14px;
  color: #111;
  > span {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    > i {
      color: #775ae0;
      font-size: 18px;
      font-family: NotoSans-SemiBold;
    }
  }
}

.progress-bar {
  height: 6px;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 132px;
  background: linear-gradient(90deg, #775ae0 0%, #f78295 100%);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.question-title {
  font-size: 18px;
  margin-bottom: 12px;
  text-align: left;
  font-family: NotoSans-SemiBold;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.option-item {
  background: white;
  border-radius: 15px;
  padding: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
}

.option-item:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.option-item.selected {
  border-color: #775ae0;
  background-color: #f8f5ff;
  color: #775ae0;
}

.option-image {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.option-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.option-text {
  flex: 1;
  padding: 0 30px 0 8px;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 14px;
  font-family: NotoSans-SemiBold;
}

.option-check {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #775ae0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.option-check svg {
  width: 16px;
  height: 16px;
}

.navigation-buttons {
  // margin-top: auto;
  // display: flex;
  // justify-content: space-between;
}

.prev-btn {
  background: #775ae0;
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: 24px;
  font-size: 18px;
  // cursor: pointer;
  width: 100%;
  transition: background 0.2s;
  font-family: NotoSans-SemiBold;
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prev-btn:hover:not(:disabled) {
  background: #7a6ba6;
}
</style>
